<template>
  <ul class="tab-bar">
    <li
      v-for="(item, index) in tab_list"
      :key="index"
      @click="onActive(index)"
      :class="item.className"
    >
      <van-icon :name="item.icon" />
      <span>{{ item.title }}</span>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'TabBar',
  data () {
    return {
      tab_list: [
        { title: '首页', icon: 'home-o', className: '' ,ref:'/main'},
        { title: '消息', icon: 'chat-o', className: '' ,ref:'/news'},
        { title: '购物车', icon: 'shopping-cart-o', className: '' ,ref:'/cart'},
        { title: '我的', icon: 'user-o', className: '' ,ref:'/mine'}
      ]
    }
  },
  created () {
    this.tab_list[3].className = 'active'
  },
  methods: {
    onActive (index) {
      this.tab_list.forEach(item => { item.className = '' })
      this.tab_list[index].className = 'active'
      // console.log(this.tab_list[index].ref);
      let path = this.tab_list[index].ref
      this.$router.push(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-bar {
  display: flex;
  justify-content: space-around;
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 1.1rem;
  background-color: #fff;
  li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .van-icon {
      font-size: 0.44rem;
    }
    span {
      padding-top: 0.06rem;
      font-size: 0.24rem;
    }
  }
  .active {
    // color: #ff6600;
  }
}
</style>
